<template>
  <div class="main">
    <div class="selectItem" ref="selectItem">
      <p>{{ title }}</p>
      <van-row type="flex" justify="start">
        <van-col :span="6">
          <van-tag color="#7B7777" size="large" plain round>标签</van-tag>
        </van-col>
        <van-col :span="6">
          <van-tag color="#7B7777" size="large" plain round>标签</van-tag>
        </van-col>
        <van-col :span="6">
          <van-tag color="#7B7777" size="large" plain round>标签</van-tag>
        </van-col>
        <van-col :span="6">
          <van-tag color="#7B7777" size="large" plain round>标签</van-tag>
        </van-col>
        <van-col :span="6">
          <van-tag color="#7B7777" size="large" plain round>标签</van-tag>
        </van-col>
        <van-col :span="6">
          <van-tag color="#7B7777" size="large" plain round>标签</van-tag>
        </van-col>
        <van-col :span="6">
          <van-tag color="#7B7777" size="large" plain round>标签</van-tag>
        </van-col>
        <van-col :span="6">
          <van-tag color="#7B7777" size="large" plain round>标签</van-tag>
        </van-col>
        <van-col :span="6">
          <van-tag color="#7B7777" size="large" plain round>标签</van-tag>
        </van-col>
      </van-row>
    </div>
    <p class="unfold" @click="unfold">
      {{ status }}<i class="iconfont icon-xiala" ref="icon"></i>
    </p>
  </div>
</template>

<script>
export default {
  name: 'SelectItem',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      isUnfold: false,
      status: '展开'
    }
  },
  created () {},
  mounted () {},
  methods: {
    // 展开
    unfold () {
      if (this.isUnfold) {
        this.$refs.selectItem.className = 'selectItem'
        this.$refs.icon.className = 'iconfont icon-xiala'
        this.isUnfold = false
        this.status = '展开'
      } else {
        this.$refs.selectItem.className = 'all'
        this.$refs.icon.className = 'iconfont icon-shousuoshangjiantou'
        this.isUnfold = true
        this.status = '收起'
      }
    }
  }
}
</script>

<style scoped lang="less">
.main {
  border-bottom: 1px solid #fff;
}
.all {
  padding: 0 28px;
}
.selectItem {
  max-height: 234px;
  padding: 0 28px;
  overflow: hidden;
}
p {
  margin: 27px 14px;
  font-size: 28px;
  color: #101010;
}
.van-row {
  .van-col {
    text-align: center;
    .van-tag {
      display: inline-flex;
      justify-content: center;
      box-sizing: border-box;
      min-width: 132px;
      margin-top: 13px;
      margin-bottom: 13px;
      text-align: center;
    }
  }
}
.unfold {
  text-align: center;
  font-size: 26px;
  color: #7b7777;
}
</style>
